import React, { Component } from 'react'

//1.引入路由
//Switch路由视图 Route路由规则 Redirect重定向
import { Switch, Route, Redirect, NavLink } from 'react-router-dom'

//2.引入header头部组件
import Header from '../../components/Header/Header'

//3.引入商品详情接口
import { reqgetgoodsinfo, reqgetcartadd } from '../../http/api'


//7.引入less
import './Detail.less'
//8.引入ant按钮
import { Button, Space, Toast } from 'antd-mobile'

//9.引入判断环境 渲染图片
import { $pre } from '../../http/http'


export default class Detail extends Component {
    constructor() {
        super()
        this.state = {
            detail: [],
        }

    }

    componentDidMount() {
        //1.获取url路径的id参数
        let id = this.props.match.params
        console.log(id);//输出的值为{id: '8'} 所以下面不需要加{}
        //2.发送详情页信息获取
        reqgetgoodsinfo(id).then(res => {
            this.setState({
                detail: res.data.list,
            })
        })
    }

    // 点击添加发起添加请求
    async add() {
        let user = {
            uid: JSON.parse(localStorage.getItem('isLogin')).uid,
            type: 1,
            goodsid: this.state.detail[0].id,
            num: 1
        }
        const res = await reqgetcartadd(user)
        //添加购物车成功
        if (res.data.code == 200) {
            Toast.show({
                content: res.data.msg,
            })
        }
    }

    render() {
        let { detail,} = this.state
        return (
            <div className='detail app'>
                <Header title='购物车' back='back' title='商品详情'></Header>
                {detail.map(item => {
                    return (
                        <div key={item.id}>
                            <img src={$pre + item.img} alt="" />
                            {item.ishot == 1 ? <span>热卖</span> : <span>限时</span>}
                            <span>￥{item.price}</span>
                            <span>￥{item.market_price}</span>
                            <p>{item.goodsname}</p>
                            <p>{item.description}</p>
                        </div>
                    )
                })}

                {/* 底部导航 */}
                {/* NavLink和Link的区别在于  NavLink可以实现动态类名切换颜色 Link不可以 */}
                {/* activeClassName实现颜色类名的切换 */}
                <footer>
                    <NavLink activeClassName='active' to="/index/home">
                        <i className='iconfont icon-shouye'></i>
                        <div>客服</div>
                    </NavLink>
                    <NavLink activeClassName='active' to="/index/cate">
                        <i className='iconfont icon-fenlei'></i>
                        <div>店铺</div>
                    </NavLink>
                    <NavLink activeClassName='active' to="/index/shop">
                        <i className='iconfont icon-gouwucheman'></i>
                        <div>购物车</div>
                    </NavLink>

                    <Button color='warning' shape='rounded' onClick={() => this.add()}>加入购物车</Button>
                    <Button color='danger' shape='rounded' >立即购买</Button>
                </footer>
            </div>
        )
    }
}
